import React, { Component } from "react";
// render props作用：逻辑复用
// render：render函数中渲染基础组件
// props: 传递是一个props，传函数，返回值为基础组件
// 1. 传render
// 2. 传children
// props.children 传单个节点可以直接渲染，传多个节点会形成一个数组
class Wrapper extends Component {
    componentDidMount() {
        console.log("这里是手机壳，给你提供保护功能");
    }
    state = {
        x: 0,
        y: 0,
    };
    render() {
        // console.log(this.props.children);
        return (
            <div>
                Wrapper {this.props.children[0]()} {this.props.children[1]()}
                x: {this.state.x}
                y: {this.state.y}
            </div>
        );
    }
}
class Ipone14 extends Component {
    render() {
        return <div>iPhone14</div>;
    }
}
class Ipone14Pro extends Component {
    render() {
        return <div>Ipone14Pro</div>;
    }
}
class App extends Component {
    render() {
        return (
            <div>
                render props
                <Wrapper>
                    {() => {
                        console.log("我是来自props的函数");
                        return <Ipone14></Ipone14>;
                    }}
                    {() => {
                        return <Ipone14Pro></Ipone14Pro>;
                    }}
                </Wrapper>
            </div>
        );
    }
}
export default App; // 包装后的组件
